<template>
    <div>
        <div class="contents">
            <div class="contentleft">
                <p class="leftone">1#升降机</p>
                <p class="lefttwo">安装高度5.6m</p>
                <p class="leftthree">安装高度5.6m</p>
                <img src="@/assets/image/123.png" alt="">
            </div>
            <div class="centercontent">
                <div class="picture"></div>
                <p class="name">周德明<span>&nbsp;&nbsp;&nbsp;&nbsp;钢筋班&nbsp;&nbsp;&nbsp;&nbsp;钢筋工</span></p>
                <p>中铁六局集团有限公司</p>
                <p>15817409116</p>
                <p class="equipment">设备型号&nbsp;&nbsp;&nbsp;<span>TCT315</span></p>
                <p class="equipment1">产权单位&nbsp;&nbsp;&nbsp;<span>广东建工集团建安</span></p>
                <p class="equipment2">生产厂家&nbsp;&nbsp;&nbsp;<span>广东建工集团建安</span></p>
            </div>
            <!-- <div class="con">
                <div class="echarts" id="quality3Echarts"></div>
            </div> -->
        </div>
        <div class="center"></div>

    </div>
</template>

<script>
export default {
    name: 'one',
    data() {
        return {
            // option: {
            //     backgroundColor: 'black',
            //     grid: {
            //         left: '11%',
            //         top: '19%',
            //         right: '10%',
            //         bottom: '18%',
            //         containLabel: true,
            //     },
            //     xAxis: [
            //         {
            //             max: max,
            //             show: false,
            //         },
            //     ],
            //     yAxis: [
            //         {
            //             axisTick: 'none',
            //             axisLine: 'none',
            //             offset: '27',
            //             axisLabel: {
            //                 textStyle: {
            //                     color: '#ffffff',
            //                     fontSize: '18',
            //                 },
            //             },
            //             inverse: true,
            //             data: ['工序A', '工序B', '工序C', '工序D'],
            //         },
            //         {
            //             name: 'outer',
            //             show: false,
            //             inverse: true,
            //             data: [],
            //         },
            //         {
            //             name: 'bg',
            //             show: false,
            //             inverse: true,
            //             data: [],
            //         },
            //     ],
            //     series: [
            //         {
            //             name: '条',
            //             type: 'bar',
            //             yAxisIndex: 0,

            //             data: [2040, 1175, 520, 225],
            //             label: {
            //                 normal: {
            //                     show: true,
            //                     position: 'right',
            //                     textStyle: {
            //                         color: '#ffffff',
            //                         fontSize: '18',
            //                     },
            //                 },
            //             },
            //             barWidth: 12,
            //             itemStyle: {
            //                 normal: {
            //                     color: function (params) {
            //                         var num = myColor.length;
            //                         return myColor[params.dataIndex % num];
            //                     },
            //                 },
            //             },
            //             z: 2,
            //         },
            //         {
            //             name: '框',
            //             type: 'bar',
            //             yAxisIndex: 1,
            //             data: [max * 0.998, max * 0.998, max * 0.998, max * 0.998],
            //             barWidth: 20,
            //             itemStyle: {
            //                 normal: {
            //                     color: '#0e2147',
            //                     barBorderRadius: 5,
            //                 },
            //             },
            //             z: 1,
            //         },
            //         {
            //             name: '外框',
            //             type: 'bar',
            //             yAxisIndex: 2,
            //             barGap: '-100%',
            //             data: [max, max, max, max],
            //             barWidth: 24,
            //             itemStyle: {
            //                 normal: {
            //                     color: function (params) {
            //                         var num = myColor.length;
            //                         return myColor[params.dataIndex % num];
            //                     },
            //                     barBorderRadius: 5,
            //                 },
            //             },
            //             z: 0,
            //         },
            //         {
            //             name: '外圆',
            //             type: 'scatter',
            //             hoverAnimation: false,
            //             data: [0, 0, 0, 0],
            //             // yAxisIndex: 2,
            //             symbolSize: 35,
            //             itemStyle: {
            //                 normal: {
            //                     color: function (params) {
            //                         var num = myColor.length;
            //                         return myColor[params.dataIndex % num];
            //                     },
            //                     opacity: 1,
            //                 },
            //             },
            //             z: 2,
            //         },
            //     ],
            // },
            // max: 2500,
            // myColor: ['#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC']
        }
    },

}
</script>

<style lang="scss" scoped>
.contents {
    display: flex;

    .contentleft {

        img {
            width: 27.5rem;
            height: 100%;
            margin-left: -5rem;
        }

        .leftone {
            position: absolute;
            left: 7.1875rem;
            font-size: 1.25rem;
            top: 53%;
        }

        .lefttwo {
            position: absolute;
            top: 76%;
            font-size: 1rem;
            transform: scale(0.9);
            color: #d6d6d6;
        }

        .leftthree {
            position: absolute;
            top: 82%;
            left: 13%;
            font-size: 1rem;
            transform: scale(0.9);
            color: #d6d6d6;
        }
    }

    .centercontent {
        width: 15rem;
        height: 21.875rem;
        margin-top: 3.4375rem;
        margin-left: 1.875rem;
        background-color: red;

        .picture {
            width: 4.375rem;
            height: 4.375rem;
            border-radius: 50%;
            background-color: white;
            margin-top: 2.5rem;
        }

        .name {
            font-size: 1.25rem;
            color: white;

            span {
                font-size: 1rem;
                color: #9e9e9e;
            }
        }

        p {
            font-size: 1rem;
            color: #9e9e9e;
            margin-top: .3125rem;
        }

        .equipment {
            margin-top: 1.25rem;
        }

        .equipment,
        .equipment1,
        .equipment2 {
            span {
                color: white;
            }
        }
    }

    .con {
        .echarts {
            width: 27.1875rem;
            height: 14.6875rem;
            // background-color: #3f9bf7;
        }
    }

}

.center {
    width: .125rem;
    height: 31.25rem;
    background-color: rgb(105, 105, 105);
    position: absolute;
    top: 35rem;
    left: 50%;

}
</style>